import React, { useEffect, memo,useState } from "react"
import { connect } from "react-redux"
import * as actionTypes from './store/actionCreators'
import { useLocation,useHistory } from "react-router-dom"
import SongList from "../../components/detail/songlist/SongListOther.jsx"
import ControlSong from "../../baseUI/Control/controlSong"
import imgSearch from '../../assets/images/搜索.png'
import LazyLoad from 'react-lazyload';
import loading from '../../assets/images/loading.gif'
import './SearchDetail.css'
let keywords = '';
let songId =0;
let singerId = 2843;
let picUrl =''



const searchDetail = (props) => {
    // console.log(props,'=====');
    const {getDetailDataDispatch,searchResult={},songUrl=[],singerDetail={},songDetail=[],songLyric={}}=props;
    const history = useHistory()
    
    const {songs=[]} =searchResult;
    
    const [first] = songs;
   
    
    
    let singerName = ''
    let musicSize =0
    let mvSize=0
    let albumSize=0
    let songList = []
    
    let songListArr =singerDetail?.hotSongs??[];
    // console.log(songListArr[0]?.al.picUrl,'========')
    let picUrlArr = []
    for(let m = 0;m<6;m++){
        picUrlArr[m] = songListArr[m]?.al?.picUrl??''
    }
    
    
    // console.log(picUrlArr,'-----------')
  
    if(typeof first==='undefined'){
        singerId =null;
        picUrl=''
    }
    else{
        const {artists=[]}=first;
        singerId = artists[0].id;
        // picUrl = singerDetail.artist.picUrl
    }
    if(typeof singerDetail.artist==='undefined'){
        picUrl=''
        
    }
    else{
        picUrl=singerDetail.artist.picUrl;
        singerName=singerDetail.artist.name;
        musicSize=singerDetail.artist.musicSize;
        albumSize=singerDetail.artist.albumSize;
        mvSize=singerDetail.artist.mvSize
        // console.log(picUrl,'pic')
    }
    

    if(typeof singerDetail.hotSongs==='undefined'){
            songList=[]
            
    }
    else{
        songList = singerDetail.hotSongs.filter((item,index) =>{
            return index<=6&&index>=0
        });

        // setSongList=()=>{
            
        // }
            
    }
    // console.log(songList,'..')
   
   
    let [ SongId,setSongId] =useState(0);
    if(!SongId){
        songId =0;
    }
    else{
        songId = SongId;
    }
    // console.log(songId,'/////')
    useEffect(() => {
        
        getDetailDataDispatch()
   
    }, [songId])
    let {pathname} = useLocation();
    let urlArray = pathname.split("/");
    // console.log(urlArray);
    keywords = urlArray[2];
    function gotoSearch(){
        history.push(`/search`)

    }
    function gotoHome(){
        // console.log(history,'history')
        history.replace('/home/main')
    }
    function gotoSingerDetail(){
        history.push(`/singer/${singerId}`)
    }
    
    // console.log(keywords,'6666');
    useEffect(() => {
        if (!props.length) {
            getDetailDataDispatch()
        }
        getDetailDataDispatch()
   
    }, [singerId])
   
    return (
<div>
    <div className="header_search">
        <div className="search_detail">
           <div className="search-input_page_detail">
                <div className="search-place">
                   
                    
                    
                        <img className='search-img' src={imgSearch}></img>
                    
                    <input type="text"  id="search_keyword" onClick={gotoSearch} value={keywords} readOnly/> 
                    <div className="cancel" onClick={gotoHome}>取消</div>
                </div>
            </div>
            
        </div> 
    </div>
    
    {   
                
                
                singerDetail?
                <div className="singer_info">
                    <div className="singer_header" onClick={gotoSingerDetail}>
                        <div className="singer_avatar">
                        
                            <img src={picUrl?picUrl:loading} data-src={picUrl} loading="lazy" alt="" className="singer_picUrl"/>
                       
                        </div>
                        <div className="singer_detail">
                            <div className="detail_top">
                                歌手：{singerName}
                            </div>
                            <div className="detail_other">
                                歌曲：{musicSize} 专辑：{albumSize} 视频：{mvSize}
                            </div>
                        </div>

                    </div>
                    <div className="singer_song">
                        <div className="songList_detail">
                            {
                              songList.length?
                              songList.map((item,index)=>{
                                      return(
                                              <div className="song_body" key={index} onClick={()=>{setSongId(item.id)}}>
                                                  <div className="song_pic">
                                                          <img src={item.al.picUrl} alt="" className="song_pic_url"/>
                                                  </div>
                                                  <div className="song_name_arr">
                                                      {item.name}
                                                                  
                                                  </div>
                                              </div>
                                                      )
                                                  }):<></>
                              
                            }
                        </div>
                        
                    </div>
                </div>
                :<></>
    }
            <SongList  tracks={songs} SongId={SongId} setSongId={setSongId} songUrl={songUrl} songDetail={songDetail}/>
            {songUrl.length&&songDetail.length&&songLyric?<ControlSong  songUrl={songUrl} songDetail={songDetail} Lyric={songLyric}/>:<></>
            }
</div>
    )
}
const mapStateToDispatch = (dispatch) => {
    // console.log(dispatch); 
   
    return {
        getDetailDataDispatch() {
            dispatch(actionTypes.getSearchAll(keywords))
            dispatch(actionTypes.getSongUrl(songId))
            dispatch(actionTypes.getSingerInfoRequest(singerId))
            dispatch(actionTypes.getSongDetail(songId))
            dispatch(actionTypes.getSongLyric(songId))
            
            
        }
    }
}
const mapStateToProps = (state) => {
    // console.log(state,'5555555555')
    
    return {
        searchResult:state.searchDetail.searchResult,
        songUrl:state.searchDetail.songUrl,
        singerDetail:state.searchDetail.singerDetail,
        songDetail:state.searchDetail.songDetail.songs,
        songLyric:state.searchDetail.songLyric.lrc

    }
}

export default connect(mapStateToProps, mapStateToDispatch)(memo(searchDetail))
